<template>
	<div class="magic-block" :style="getStyle()">
		<img v-if="pic" :src="pic">
		<div v-if="font && font.text" class="text" :style="'color:'+(font.color ? font.color : '#000000')+';font-size:'+(font.size ? font.size : 16)+'px;'">{{font.text}}</div>
	</div>
</template>

<script>
export default {
	props: {
		config : {
			type : Object,
			default : ()=> {
				return {top:50,left:50,width:30,height:20,radius:10,background:'#ff0000'}
			}
		},
		float: Boolean,
		event: String,
		pic: String,
		font: {
			type : Object,
			default : ()=> {
				return {text:'',size:16,color:'#000000'}
			}
		}
	},
	data() {
		return {
		}
	},
	methods: {
		getStyle (){
			let left = this.float ? 140 : 0
			let top = this.float ? 113 : 0
			let style = `
				top:`+(this.config.top/100*662-this.config.height/200*371+top)+`px;
				left:`+(this.config.left/100*371-this.config.width/200*371+left)+`px;
				width:`+this.config.width/100*371+`px;
				height:`+this.config.height/100*371+`px;
				border-radius:`+this.config.radius/100*(this.config.width/100*371)+`px;
			`
			style += this.config.background ? 'background: '+this.config.background+';' : ''
			style += this.float ? 'position: fixed;' : 'position:absolute;'
			return style
		}
	}
}
</script>

<style lang='less'>
	.magic-block {
		z-index: 99;
		display: flex;
		align-items: center;
		font-size: 13px;
		color: #ffffff;
		text-align: center;
		overflow:hidden;
		img{
			width: 100%;
			height: 100%;
		}
		.text{
			width: 100%;
			text-align: center;
		}
	}
</style>